<script setup lang="ts">
const colorDict = [
  { color: '#30fc31', label: '热带低压', ranges: [6, 7] },
  { color: '#307efa', label: '热带风暴', ranges: [8, 9] },
  { color: '#fffc00', label: '强热带风暴', ranges: [10, 11] },
  { color: '#ff9c00', label: '台风', ranges: [12, 13] },
  { color: '#fb7cff', label: '强台风', ranges: [14, 15] },
  { color: '#fa3030', label: '超强台风', ranges: [16, 20] }
]
</script>

<template>
  <div>
    <ul class="typhoon-legend">
      <!-- 台风筛选看 -->
      <li v-for="item in colorDict" :key="item.label">
        <span class="color-block" :style="{ backgroundColor: item.color }"></span>
        <label>{{ item.label }}</label>
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
.typhoon-legend {
  position: absolute;
  bottom: 4vh;
  right: 1vw;
  overflow: hidden;
  padding: 0.5rem;
  color: #fff;
  background-color: #04263797;
  border-radius: 0.3rem;
  font-size: 0.75rem;
  display: flex;
  flex-direction: row;
  li {
    margin-right: 0.5rem;
    &:last-child {
      margin-right: 0;
    }
    display: inline-block;
    .color-block {
      --size: 0.8rem;
      width: var(--size);
      height: var(--size);
      margin-right: 0.3rem;
      display: inline-block;
    }
  }
}
</style>
